<template>
  <div class="memeory-bg correct-wrong">
    <Header :isTransBg="true" :width="1000" :isGoBack="false">
      <template v-slot:left>
        <span class="weight-title"
          >{{ checkedBookData.edition_name }}-{{
            checkedBookData.grade_name
          }}</span
        >
      </template>
      <template v-slot:right>
        <div class="close-memeory" @click="goStudyCenter">
          关闭
          <img class="ml5" src="@/assets/img/close-circle.png" alt="" />
        </div>
      </template>
    </Header>
    <div class="memory-container w1000">
      <div class="memory-question">
        <div class="question-container">
          <div class="memory-header">
            错题订正
            <span v-if="sentenceData.questionType == 3" class="fr reminder-text"
              >完成单词输入后，按"Enter"进入下一题</span
            >
          </div>
          <Correct
            :sentenceData="sentenceData"
            @nextWord="nextIntensiveWord(intensiveWordIndex + 1)"
            ref="correct"
          ></Correct>
          <div class="correct-bottom">
            <div class="total-num">
              <span>{{ intensiveWordIndex + 1 }} </span>
              /{{ wrongQuestionList.length }}道题
            </div>
            <div class="total-pagination">
              <!-- <div
                class="left click"
                @click="nextIntensiveWord(intensiveWordIndex - 1)"
              >
                <i class="el-icon-arrow-left"></i>
              </div> -->
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                class="left click"
                @click="nextIntensiveWord(intensiveWordIndex - 1)"
                :disabled="intensiveWordIndex == 0"
              ></el-button>
              <div class="checked-item-box">
                <ul
                  class="checked-item"
                  :style="`left:${intensiveWordIndex * -30}px;width:${
                    wrongQuestionList.length * 30
                  }px`"
                >
                  <li
                    class="click"
                    :class="intensiveWordIndex == index ? 'is-checked' : ''"
                    v-for="(item, index) in wrongQuestionList"
                    :key="index"
                    @click="nextIntensiveWord(index)"
                  >
                    {{ index + 1 }}
                  </li>
                </ul>
              </div>

              <!-- <div
                class="right click"
                @click="nextIntensiveWord(intensiveWordIndex + 1)"
              >
                <i class="el-icon-arrow-right"></i>
              </div> -->
              <el-button
                type="primary"
                icon="el-icon-arrow-right"
                class="right click"
                :disabled="intensiveWordIndex == wrongQuestionList.length - 1"
                @click="nextIntensiveWord(intensiveWordIndex + 1)"
              ></el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Correct from "./Correct";
export default {
  data() {
    return {
      intensiveWordIndex: 0,
      sentenceData: {},
      wrongQuestionList: [],
    };
  },
  methods: {
    goStudyCenter() {
      this.$router.push({
        name: "sentenceStudyCenter",
      });
    },
    getQuestionList() {
      let res = JSON.parse(localStorage.getItem("sentencePaperRes"));
      res.data.list_volist.forEach((question, questionIndex) => {
        question.studentAnswer = "";
        if (
          question.student_sentence_answer_vos &&
          question.student_sentence_answer_vos[0]
        ) {
          question.studentAnswer =
            question.student_sentence_answer_vos[0].translation;
        }
        question.questionIndex = questionIndex;
        // 句子
        question.sentence = question.content;
        // 释义
        question.paraphrase = question.sentence_answer_vos[0].translation;
        // 音频
        question.isTrue = question.sentence_answer_vos[0].is_true;
        question.audioURL = question.audio_src;
      });

      this.wrongQuestionList = res.data.list_volist.filter((question) => {
        return question.isTrue == 0;
      });
      this.nextIntensiveWord(0);
    },
    nextIntensiveWord(value) {
      if (value < 0) {
        this.intensiveWordIndex = 0;
      } else if (value > this.wrongQuestionList.length - 1) {
        this.intensiveWordIndex = this.wrongQuestionList.length - 1;
      } else {
        this.intensiveWordIndex = value;
      }
      this.sentenceData = this.wrongQuestionList[this.intensiveWordIndex];
      this.$nextTick(() => {
        this.$refs.correct.initCompon();
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getQuestionList();
  },
  components: {
    Correct,
    Header,
  },
};
</script>